<template>
  <div>
    <nav-bar>
      <template v-slot:default>商品详情:{{ id }}</template>
    </nav-bar>
    <van-image style="margin-top: 50px"
               width="100%"
               lazy-load
               :src="goods.cover_url"
    />
    <van-card
        :num="goods.stock"
        :price="goods.price+'.00'"
        :desc="goods.description"
        :title="goods.title"
    >
      <template #tags>
        <van-tag plain type="danger">标签</van-tag>
        <van-tag plain type="danger">标签</van-tag>
      </template>
      <template #footer>
        <van-button type="warning" @click="handleAddCart">加入购物车</van-button>
        <van-button type="danger" @click="goToCart">立即购买</van-button>
      </template>
    </van-card>

    <van-tabs v-model="active">
      <van-tab title="概述">
        <div class="content" v-html="goods.details">
        </div>
      </van-tab>
      <van-tab title="评论">

      </van-tab>
      <van-tab title="相关图书">
        <goods-list :goods="like_goods"></goods-list>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import {defineComponent, reactive, ref, toRefs, watchEffect} from 'vue'
import NavBar from 'components/common/navbar/NavBar'
import {useRoute, useRouter} from 'vue-router'
import {getDetail} from "@/network/detail";
import GoodsList from "@/components/content/goods/GoodsList";
import {addCart} from "../../network/cart";
import {Toast} from "vant";
import {useStore} from "vuex";

export default defineComponent({
  components: {
    NavBar,
    GoodsList
  },
  setup() {
    let active = ref(0)
    const route = useRoute()
    const router = useRouter()
    const store = useStore()

    let book = reactive({
      goods: {},
      like_goods: []
    })

    let id = ref('0')
    /*onMounted(() => {
        id.value = route.query.id
        getDetail(id.value).then(res => {
            book.goods = res.goods
            book.like_goods = res.like_goods
        })
    })*/
    // 当路由参数变化时，页面数据无法更新的时候
    watchEffect(() => {
      // 接收路由参数
      id.value = route.query.id
      // 加载数据
      if (route.query.id) {
        getDetail(id.value).then(res => {
          book.goods = res.goods
          book.like_goods = res.like_goods
        })
      }
    })

    // 添加购物车
    const handleAddCart = () => {
      addCart({
        goods_id: id.value,
        num: 1
      }).then(res => {
        if (res.status === 201 || res.status === 204) {
          Toast.success('加入成功')
          // 调用状态管理actinos中的方法异步执行mutations，设置购物车数量
          store.dispatch('updateCart')
        }
      })
    }
    // 立即购买=>转到购物车
    const goToCart = () => {
      addCart({
        goods_id: id.value,
        num: 1
      }).then(res => {
        if (res.status === 201 || res.status === 204) {
          // 调用状态管理actinos中的方法异步执行mutations，设置购物车数量
          store.dispatch('updateCart')
          Toast.success('结算')
          router.push({path: '/shopcart'})
        }
      })
    }
    return {
      id,
      active,
      ...toRefs(book),
      handleAddCart,
      goToCart
    }
  }
})
</script>

<style lang="scss" scoped>
.content {
  padding: 10px;

  img {
    max-width: 100%;
    height: auto;
  }
}
</style>
